/*===================================================* * step1
\*===================================================*/
.king-justified-pearls.king-pearls {
  display: table;
  width: 100%;
  table-layout: fixed; }
  .king-justified-pearls.king-pearls .king-pearl {
    display: table-cell;
    width: 100%; }

.king-pearls {
  margin-bottom: 22px; }
  .king-pearls.row {
    display: block; }
  .king-pearls.king-pearls-lg .king-pearl:after,
  .king-pearls.king-pearls-lg .king-pearl:before {
    top: 20px; }
  .king-pearls.king-pearls-lg .king-pearl-title {
    font-size: 18px; }
  .king-pearls.king-pearls-lg .king-pearl-icon, .king-pearls.king-pearls-lg .king-pearl-number {
    width: 40px;
    height: 40px;
    line-height: 36px; }
  .king-pearls.king-pearls-lg .king-pearl-icon {
    font-size: 20px; }
  .king-pearls.king-pearls-lg .king-pearl-number {
    font-size: 20px; }
  .king-pearls.king-pearls-sm .king-pearl:after,
  .king-pearls.king-pearls-sm .king-pearl:before {
    top: 16px; }
  .king-pearls.king-pearls-sm .king-pearl-title {
    font-size: 14px; }
  .king-pearls.king-pearls-sm .king-pearl-icon, .king-pearls.king-pearls-sm .king-pearl-number {
    width: 32px;
    height: 32px;
    line-height: 28px; }
  .king-pearls.king-pearls-sm .king-pearl-icon {
    font-size: 16px; }
  .king-pearls.king-pearls-sm .king-pearl-number {
    font-size: 16px; }
  .king-pearls.king-pearls-xs .king-pearl:after,
  .king-pearls.king-pearls-xs .king-pearl:before {
    top: 12px;
    height: 2px; }
  .king-pearls.king-pearls-xs .king-pearl-title {
    font-size: 10px; }
  .king-pearls.king-pearls-xs .king-pearl-icon, .king-pearls.king-pearls-xs .king-pearl-number {
    width: 24px;
    height: 24px;
    line-height: 20px; }
  .king-pearls.king-pearls-xs .king-pearl-icon {
    font-size: 12px; }
  .king-pearls.king-pearls-xs .king-pearl-number {
    font-size: 12px; }

.king-pearl {
  position: relative;
  padding: 0;
  margin: 0;
  text-align: center; }
  .king-pearl:after, .king-pearl:before {
    position: absolute;
    top: 18px;
    z-index: 0;
    width: 50%;
    height: 4px;
    content: "";
    background-color: #CCC; }
  .king-pearl:before {
    left: 0; }
  .king-pearl:after {
    right: 0; }
  .king-pearl:first-child:before, .king-pearl:last-child:after {
    display: none !important; }
  .king-pearl .king-pearl-icon, .king-pearl .king-pearl-number {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    background: #ccd5db;
    border-radius: 50%;
    border: 2px solid #ccd5db; }
  .king-pearl .king-pearl-number {
    font-size: 18px; }
  .king-pearl .king-pearl-icon {
    font-size: 18px; }
  .king-pearl .king-pearl-title {
    margin-top: .5em;
    display: block;
    font-size: 16px;
    color: #526069;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap; }
  .king-pearl.current:after, .king-pearl.current:before {
    background-color: #62a8ea; }
  .king-pearl.current .king-pearl-icon, .king-pearl.current .king-pearl-number {
    color: #62a8ea;
    background-color: #fff;
    border-color: #62a8ea;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); }
  .king-pearl.disabled {
    pointer-events: none;
    cursor: auto; }
    .king-pearl.disabled:after, .king-pearl.disabled:before {
      background-color: #CCC; }
    .king-pearl.disabled .king-pearl-icon, .king-pearl.disabled .king-pearl-number {
      color: #fff;
      background-color: #ccd5db;
      border-color: #ccd5db; }
  .king-pearl.error:before {
    background-color: #62a8ea; }
  .king-pearl.error:after {
    background-color: #CCC; }
  .king-pearl.error .king-pearl-icon, .king-pearl.error .king-pearl-number {
    color: #f96868;
    background-color: #fff;
    border-color: #f96868; }
  .king-pearl.done:after, .king-pearl.done:before {
    background-color: #62a8ea; }
  .king-pearl.done .king-pearl-icon, .king-pearl.done .king-pearl-number {
    color: #fff;
    background-color: #62a8ea;
    border-color: #62a8ea; }

.king-pearl.king-pearls-info .done .king-pearl-number {
  background-color: #4A9BFF;
  border-color: #4A9BFF; }

/*===================================================* * step2
\*===================================================*/
.king-step2 {
  text-align: center; }

.king-justified-process.king-process {
  display: table;
  table-layout: fixed;
  width: 100%; }
  .king-justified-process.king-process > div {
    display: table-cell;
    width: 100%; }

.king-process {
  height: 50px;
  display: inline-block;
  border-radius: 5px;
  color: #fff;
  text-align: center; }
  .king-process > div {
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    display: inline-block;
    position: relative;
    width: 200px; }
    .king-process > div:first-child {
      border-radius: 5px; }
  .king-process .step-hasnext:after, .king-process .step-hasnext:before {
    border: solid transparent;
    border-width: 25px;
    content: ' ';
    position: absolute;
    height: 0;
    right: -50px;
    top: 0px;
    width: 0;
    z-index: 1; }
  .king-process.king-process-info {
    background-color: #d5eaff; }
    .king-process.king-process-info .process-done {
      background-color: #88c3ff; }
      .king-process.king-process-info .process-done.step-hasnext:before {
        border-left-color: #fff; }
      .king-process.king-process-info .process-done.step-hasnext:after {
        border-left-color: #88c3ff;
        right: -48px; }
    .king-process.king-process-info .process-did.step-hasnext:before {
      border-left-color: #fff; }
    .king-process.king-process-info .process-did.step-hasnext:after {
      border-left-color: #d5eaff;
      right: -48px; }
  .king-process.king-process-primary {
    background-color: #9ecaf7; }
    .king-process.king-process-primary .process-done {
      background-color: #57a3f1; }
      .king-process.king-process-primary .process-done.step-hasnext:before {
        border-left-color: #fff; }
      .king-process.king-process-primary .process-done.step-hasnext:after {
        border-left-color: #57a3f1;
        right: -48px; }
    .king-process.king-process-primary .process-did.step-hasnext:before {
      border-left-color: #fff; }
    .king-process.king-process-primary .process-did.step-hasnext:after {
      border-left-color: #9ecaf7;
      right: -48px; }
  .king-process.king-process-warning {
    background-color: #ffdc96; }
    .king-process.king-process-warning .process-done {
      background-color: #ffc349; }
      .king-process.king-process-warning .process-done.step-hasnext:before {
        border-left-color: #fff; }
      .king-process.king-process-warning .process-done.step-hasnext:after {
        border-left-color: #ffc349;
        right: -48px; }
    .king-process.king-process-warning .process-did.step-hasnext:before {
      border-left-color: #fff; }
    .king-process.king-process-warning .process-did.step-hasnext:after {
      border-left-color: #ffdc96;
      right: -48px; }
  .king-process.king-process-danger {
    background-color: #ffc6c6; }
    .king-process.king-process-danger .process-done {
      background-color: #ff7979; }
      .king-process.king-process-danger .process-done.step-hasnext:before {
        border-left-color: #fff; }
      .king-process.king-process-danger .process-done.step-hasnext:after {
        border-left-color: #ff7979;
        right: -48px; }
    .king-process.king-process-danger .process-did.step-hasnext:before {
      border-left-color: #fff; }
    .king-process.king-process-danger .process-did.step-hasnext:after {
      border-left-color: #ffc6c6;
      right: -48px; }
  .king-process.king-process-success {
    background-color: #97e2b5; }
    .king-process.king-process-success .process-done {
      background-color: #5bd18b; }
      .king-process.king-process-success .process-done.step-hasnext:before {
        border-left-color: #fff; }
      .king-process.king-process-success .process-done.step-hasnext:after {
        border-left-color: #5bd18b;
        right: -48px; }
    .king-process.king-process-success .process-did.step-hasnext:before {
      border-left-color: #fff; }
    .king-process.king-process-success .process-did.step-hasnext:after {
      border-left-color: #97e2b5;
      right: -48px; }

/*===================================================* * step3
\*===================================================*/
.king-step3 {
  text-align: center; }
  .king-step3 li {
    overflow: hidden;
    text-align: left; }
    .king-step3 li .step-num {
      float: left;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      font-size: 15px;
      text-align: center;
      color: #aaa;
      border: 1px solid #aaa; }
    .king-step3 li .step-text {
      margin-left: 44px;
      position: relative;
      color: #999; }
      .king-step3 li .step-text h4 {
        margin: 5px 0 10px 0; }
      .king-step3 li .step-text:before {
        content: '';
        position: absolute;
        top: 35px;
        bottom: 5px;
        width: 1px;
        left: -30px;
        background: #e9e9e9; }
  .king-step3.king-step-info .process-done .step-num {
    color: #88c3ff;
    border-color: #88c3ff; }
  .king-step3.king-step-info .process-done .step-text:before {
    background-color: #88c3ff; }
  .king-step3.king-step-info .process-doing .step-num {
    background-color: #88c3ff;
    border-color: #88c3ff;
    color: #fff !important; }
  .king-step3.king-step-primary .process-done .step-num {
    color: #57a3f1;
    border-color: #57a3f1; }
  .king-step3.king-step-primary .process-done .step-text:before {
    background-color: #57a3f1; }
  .king-step3.king-step-primary .process-doing .step-num {
    background-color: #57a3f1;
    border-color: #57a3f1;
    color: #fff !important; }
  .king-step3.king-step-warning .process-done .step-num {
    color: #ffc349;
    border-color: #ffc349; }
  .king-step3.king-step-warning .process-done .step-text:before {
    background-color: #ffc349; }
  .king-step3.king-step-warning .process-doing .step-num {
    background-color: #ffc349;
    border-color: #ffc349;
    color: #fff !important; }
  .king-step3.king-step-danger .process-done .step-num {
    color: #ff7979;
    border-color: #ff7979; }
  .king-step3.king-step-danger .process-done .step-text:before {
    background-color: #ff7979; }
  .king-step3.king-step-danger .process-doing .step-num {
    background-color: #ff7979;
    border-color: #ff7979;
    color: #fff !important; }
  .king-step3.king-step-success .process-done .step-num {
    color: #5bd18b;
    border-color: #5bd18b; }
  .king-step3.king-step-success .process-done .step-text:before {
    background-color: #5bd18b; }
  .king-step3.king-step-success .process-doing .step-num {
    background-color: #5bd18b;
    border-color: #5bd18b;
    color: #fff !important; }

/*===================================================* * step4
\*===================================================*/
.king-step4 {
  margin-top: 20px; }

.king-title {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  padding: 10px 0;
  color: #666; }

.king-flows {
  display: flex; }

.king-flow {
  flex: 1;
  text-align: center;
  position: relative; }
  .king-flow::after {
    content: "";
    width: 100%;
    height: 2px;
    background: #ccc;
    position: absolute;
    left: 50%;
    top: 17px; }
  .king-flow .king-flow-number {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 32px;
    color: #ccc;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #ccc;
    padding: 0;
    font-size: 18px;
    font-weight: bold; }
  .king-flow .king-flow-icon {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 32px;
    color: #ccc;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #ccc;
    padding: 0;
    font-size: 20px; }
  .king-flow .king-flow-title {
    display: block;
    color: #ccc;
    font-size: 14px;
    margin-top: 10px; }
  .king-flow .king-flow-text {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 180px;
    height: 42px;
    line-height: 38px;
    border-radius: 21px;
    border: 2px solid #ccc;
    color: #ccc;
    font-size: 16px;
    background: #fff; }
  .king-flow .king-flow-tips {
    text-align: left;
    width: 180px;
    margin: 10px auto 0;
    color: #ccc;
    font-size: 14px; }
    .king-flow .king-flow-tips p.tip-done {
      color: #666; }
      .king-flow .king-flow-tips p.tip-done i {
        color: #4dc86f; }
    .king-flow .king-flow-tips p.tip-error {
      color: #666; }
      .king-flow .king-flow-tips p.tip-error i {
        color: #ff7979; }

.king-flow:last-of-type::after {
  display: none; }

.king-vertical {
  min-height: 80px;
  position: relative;
  overflow: hidden; }
  .king-vertical::after {
    content: "";
    width: 2px;
    height: 100%;
    background: #ccc;
    position: absolute;
    left: 17px;
    top: 10px; }
  .king-vertical .king-flow-number {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 32px;
    color: #ccc;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #ccc;
    padding: 0;
    font-size: 18px;
    font-weight: bold; }
  .king-vertical .king-flow-icon {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 32px;
    color: #ccc;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #ccc;
    padding: 0;
    font-size: 20px; }
  .king-vertical .king-vertical-text {
    text-align: left;
    margin: 12px 10px 0 10px;
    line-height: 14px;
    color: #ccc; }
    .king-vertical .king-vertical-text h5 {
      margin: 0 0 20px 0; }
    .king-vertical .king-vertical-text p.done {
      color: #5bd18b; }
    .king-vertical .king-vertical-text p.current {
      color: #666; }
  .king-vertical:last-of-type {
    height: 36px; }
    .king-vertical:last-of-type::after {
      display: none; }

.done .king-flow-number, .done .king-flow-icon, .done .king-flow-text {
  background: #5bd18b;
  border-color: #5bd18b;
  color: #fff; }

.done::after {
  background: #5bd18b; }

.done .king-flow-title, .done .king-flow-tips, .done .king-vertical-text {
  color: #666; }

.done .king-flow-tips i {
  color: #4dc86f; }

.current .king-flow-number, .current .king-flow-icon, .current .king-flow-text {
  border-color: #5bd18b;
  color: #5bd18b;
  border-width: 2px; }

.current .king-flow-title {
  color: #666; }

.king-flow-content .king-flow::after {
  top: 20px; }
